import React from 'react';
import { Form, Button, AutoComplete } from 'antd';
import { WeekMonthDate } from '@/components/WeekMonthDate';
import { history, withRouter, connect } from 'umi';
import { SelectCompany, SelectDepartment } from '../components';
import { limitDate } from '../utils';

const Search = ({ location, dispatch, form, workTask: { employeeNameList = [], query = {} } }) => {
    const [dataSource, setDataSource] = React.useState([]);

    const handleSearch = React.useCallback(e => {
        e.preventDefault();
        form.validateFields((err, values) => {
            if (!err) {
                const {
                    companyId,
                    employeeName,
                    departmentId,
                    rangeDate: { reportType, startDate, endDate }
                } = values;
                const payload = {
                    companyId,
                    employeeName,
                    departmentId,
                    reportType,
                    startDate,
                    endDate
                };

                history.push({ pathname: location.pathname, query: payload });

                dispatch({
                    type: 'workTask/clearAndPatchQuery',
                    payload
                });
            }
        });
    }, []);

    const onNameSearch = searchText => {
        setDataSource(!searchText ? [] : employeeNameList.filter(item => item.indexOf(searchText) > -1));
    };
    // const handleReset = React.useCallback(() => {
    //     dispatch({ type: 'workTask/clearAndPatchQuery' });
    // }, []);

    // const productOptions = [
    //     { label: 'GMS产品线', value: 100 },
    //     { label: 'VV LIFE产品', value: 101 },
    //     { label: '某某项目组', value: 102 }
    // ];
    // const teamOptions = [
    //     { label: '研发一组', value: 100 },
    //     { label: '研发二组', value: 101 },
    //     { label: '某某项目组', value: 102 }
    // ];

    const handleSelectChange = React.useCallback(() => {
        form.setFieldsValue({
            departmentId: ''
        });
    }, []);

    return (
        <Form layout="inline" onSubmit={handleSearch}>
            <Form.Item>
                {form.getFieldDecorator('companyId', {
                    initialValue: query.companyId
                })(
                    <SelectCompany
                        treeDefaultExpandAll
                        showSearch
                        onChange={handleSelectChange}
                        treeNodeFilterProp="title"
                    />
                )}
            </Form.Item>
            <Form.Item>
                {form.getFieldDecorator('departmentId', {
                    initialValue: query.departmentId
                })(
                    <SelectDepartment
                        treeDefaultExpandAll
                        showSearch
                        treeNodeFilterProp="title"
                        placeholder="请选择部门"
                        allowClear
                        companyId={form.getFieldValue('companyId')}
                    />
                )}
            </Form.Item>
            {/* <Form.Item label="产品线" style={{ width: 350 }}>
                <Form.Item>
                    {form.getFieldDecorator(
                        'productId',
                        {}
                    )(
                        <Select style={{ width: 120 }}>
                            {productOptions.map(item => (
                                <Select.Option value={item.value}>{item.label}</Select.Option>
                            ))}
                        </Select>
                    )}
                </Form.Item>
                <Form.Item>
                    {form.getFieldDecorator(
                        'teamId',
                        {}
                    )(
                        <Select style={{ width: 120 }}>
                            {teamOptions.map(item => (
                                <Select.Option value={item.value}>{item.label}</Select.Option>
                            ))}
                        </Select>
                    )}
                </Form.Item>
            </Form.Item> */}

            <Form.Item>
                {form.getFieldDecorator('rangeDate', { initialValue: query.startDate })(
                    <WeekMonthDate
                        reportType={query.reportType}
                        disabledDate={current => limitDate(current, query.reportType)}
                    />
                )}
            </Form.Item>

            <Form.Item label="员工">
                {form.getFieldDecorator('employeeName', { initialValue: query.employeeName })(
                    <AutoComplete dataSource={dataSource} onSearch={onNameSearch} style={{ width: 150 }}></AutoComplete>
                )}
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit">
                    查询
                </Button>
            </Form.Item>
            {/* <Form.Item>
                <Button onClick={handleReset}>置空</Button>
            </Form.Item> */}
        </Form>
    );
};

// const FormSearch = Form.create({ name: 'Search' })(Search);

export default withRouter(connect(workTask => workTask)(Search));
